<template>
	<view>
		<view class="item-block">
			<text class="item-lable">新闻标题：</text>
			<input placeholder="占位符字体是红色的" class="item-input" v-model="data.title"/>
		</view>
		<view class="item-block">
			<text class="item-lable">新闻摘要：</text>
			<textarea placeholder="占位符字体是红色的" class="remark" v-model="data.outline"/>
		</view>
		<view class="item-block">
			<text class="item-lable">新闻摘要：</text>
			<view style="-webkit-flex: 1;flex: 1;">
				<radio-group v-model="data.is_top">
					<label class="radio"><radio value="0" checked="true" />不置顶</label>
					<label class="radio"><radio value="1" />置顶</label>
				</radio-group>
			</view>
		</view>
		<view class="item-block" style="justify-content: flex-start;height:auto;align-items: center;">
			<text class="item-lable">标题图片：</text>
			<image :src="data.url" class="imgs"></image><view style="position: relative;top:-10upx;"><image src="../../static/images/upload.png" class="upload" @click="imgChoose"></image><br/>仅支持.jpg.png.gif</view>
		</view>
		<view class="item-block">
			<text class="item-lable">新闻详情：</text>
			<textarea placeholder="占位符字体是红色的" class="contents" v-model="data.details"/> 
		</view>
		<button type="primary" style="margin-top:50upx;" @click="submit">提交</button>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				data:[
					title:'',
					outline:'',
					is_top:'',
					url:'',
					details:''
				]  
			}
		},
		methods: {
			imgChoose(){
				_self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera','album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.showLoading({
						    title: '上传中...'
						});
						uni.uploadFile({
							url:_self.baseUrl+"/Upload/upload",     
							filePath: tempFilePaths[0],
							name: 'file',
							success:(uploadFileRes)=>{
								var obj=JSON.parse(uploadFileRes.data);    
								_self.data.url=obj.data.list; 
								uni.hideLoading(); 
								uni.showToast({
								   title: '上传成功',  
								   duration: 2000
								});
							},fail:()=>{
								uni.hideLoading(); 
								uni.showToast({
									title: '上传失败',
									duration: 2000
								});
							}
						})
					}
				})
			},
			submit(){
				
			}
		}
	}
</script>

<style>
.item{
		margin:0 auto;
		padding:10px;
		background:#ffffff;
		font-size:25upx;
	}
	.item-block{
		height:auto;
		padding:5px 0;
		display: flex;
		flex-direction:row;  
		align-items: center; 
		justify-content: center;
		position: relative;
	}
	.item-lable{
		height:auto;
	}
	.item-input{
		height:30px;
		line-height:30px;
		padding:0 5px;
		background:#F2F2F2;
		border-radius: 5px;
		-webkit-flex: 1;
		flex: 1;
	}
	.imgs{
		height:300upx;
		width:300upx;
		float:left;
		background:url(../../static/img/news/uploadbg.png) no-repeat;
		background-size:100% 100%;
	}
	.item-default{
		color:#7A7A7A;
	}
	.icon-right:after{
		font-family: "iconfont" !important;  
		content: "\e63c";    
		font-size:20px;
		position: absolute; 
		color:#666666;
		top:0;
		right:0;
	}
	.remark{
		height:60px;
		-webkit-flex: 1;
		flex: 1;
		padding:5px;
		position: static;
		border-radius: 5px;
		background:#F2F2F2;
	}
	.contents{
		height:500upx;
		-webkit-flex: 1;
		flex: 1;
		padding:5px;
		position: static;
		border-radius: 5px;
		background:#F2F2F2;
	}
	.upload{
		width:50upx;
		height:50upx;
		top:10upx;
		margin-right:25upx;
		position: relative;
	}
</style>
